<!-- 创建时间: 2020年12月26日 星期六 00:26 -->
<template>
    <div class="viewPreview_container">
        <center>
            <div
                v-show="questionsList == undefined || questionsList.length == 0"
                style="color: rgb(191 179 179);font-size: 20px;margin-top: 50px;"
            >
                暂无试题信息
            </div>
        </center>
        <center
            style="margin-top:10px;"
            v-if="questionsList != undefined && questionsList.length != 0"
        >
            <span class="title"
                >{{ $store.getters.getAddQuestions.className }}
                {{ $store.getters.getAddQuestions.coursesName }} 课程考试</span
            >
        </center>
        <el-backtop>
            <i class="el-icon-caret-top" title="返回顶部"></i>
        </el-backtop>
        <el-card
            class="box-card"
            v-show="questionsList != undefined && questionsList.length != 0"
        >
            <span>单选题 {{ radioCount }} 道,共 {{ radioScore }} 分</span>
            <span>多选题 {{ checkboxCount }} 道,共 {{ checkboxScore }} 分</span>
            <span>总分: {{ radioScore + checkboxScore }}</span>
            <el-popover
                style="position: fixed; right: 20px;"
                placement="left"
                width="400"
                trigger="hover"
            >
                <el-button
                    circle
                    v-for="(item, index) in questionsList"
                    :key="index"
                    class="myCircle"
                    :style="'background:' + item.answerColor"
                    @click="quickNavigation(item.id)"
                    >{{ item.id }}</el-button
                >
                <el-button slot="reference">快速导航</el-button>
            </el-popover>
        </el-card>

        <el-card
            class="box-card"
            v-for="(item, i) in questionsList"
            :key="i"
            :id="item.id"
        >
            <div slot="header" class="clearfix">
                <span v-if="item.type == 'radio'"
                    ><b>【{{ "选择题-" + (i + 1) }}】</b></span
                >
                <span v-if="item.type == 'checkbox'"
                    ><b>【{{ "多选题-" + (i + 1) }}】</b></span
                >
                <span>{{ item.questionName }} （ {{ item.score }}分 ）</span>
            </div>
            <div v-if="item.type == 'radio'" class="optionList">
                <span v-for="(ite, j) in item.optionList" :key="j">
                    {{ letterList[j] }}. {{ ite }}
                </span>
                <span class="optionList_rightOption" style="color:#67C23A;">{{
                    "【正确答案:" +
                        (item.rightOption == ""
                            ? "未选"
                            : letterList[
                                  item.optionList.indexOf(item.rightOption)
                              ]) +
                        "】"
                }}</span>
                <span
                    class="optionList_rightOption"
                    v-if="$store.getters.getUserType == 'student'"
                    :style="'color:' + item.answerColor"
                >
                    【你的答案:{{ item.studentAnswer }}】
                </span>
            </div>
            <div v-if="item.type == 'checkbox'" class="optionList">
                <span v-for="(ite, j) in item.optionList" :key="j">
                    {{ letterList[j] }}. {{ ite }}
                </span>
                <span style="color:#67C23A;">{{
                    "【正确答案:" +
                        (item.rightOption.length == 0
                            ? "未选"
                            : item.rightOption) +
                        "】"
                }}</span>
            </div>
        </el-card>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import $ from "jquery";

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            questionsList: [], // 试题列表
            letterList: ["A", "B", "C", "D", "E", "F", "H", "I", "J", "K"], // 字第列表
            radioCount: 0, //单选题数量
            radioScore: 0, //单选题数分和
            checkboxCount: 0, //多选题数量
            checkboxScore: 0, //多选题分数和
            answerList: [], //学生作答记录
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 计算题型数、分值、计算总分
        clacQuestionType() {
            let list = this.questionsList;
            for (let i = 0; i < list.length; i++) {
                if (list[i].type == "radio") {
                    this.radioCount++;
                    this.radioScore += list[i].score;
                } else if (list[i].type == "checkbox") {
                    this.checkboxCount++;
                    this.checkboxScore += list[i].score;
                }
            }
        },
        // 获取学生作答试题
        getAnswerList() {
            if (this.$store.getters.getUserType == "teacher") return;
            let studentNumber = this.$store.getters.getUserNumber;
            let classNumber = studentNumber.substr(0, 7);
            let questionBank =
                classNumber +
                "-" +
                this.$store.getters.getAddQuestions.questionBank;
            this.$http
                .post("getAnswerLibrary", {
                    classNumber,
                    questionBank,
                    studentNumber,
                })
                .then((res) => {
                    if (res.body != "") {
                        res.body[0].rightOption = JSON.parse(
                            res.body[0].rightOption
                        );
                        this.answerList = res.body;
                        this.calcAnswerList();
                    } else {
                        this.$message.warning("数据信息获取失败");
                        this.$router.push(this.$route.query.backPath);
                    }
                });
        },
        // 计算学生作答试题
        calcAnswerList() {
            let answerList = this.answerList[0].rightOption;
            for (let i = 0; i < answerList.length; i++) {
                if (
                    this.questionsList[answerList[i][0] - 1]["rightOption"] ==
                    answerList[i][1]
                ) {
                    this.$set(
                        this.questionsList[answerList[i][0] - 1],
                        "answerColor",
                        "#67C23A"
                    );
                } else {
                    this.$set(
                        this.questionsList[answerList[i][0] - 1],
                        "answerColor",
                        "#F56C6C"
                    );
                }
                let studentAnswer = this.letterList[
                    this.questionsList[answerList[i][0] - 1].optionList.indexOf(
                        answerList[i][1]
                    )
                ];
                this.$set(
                    this.questionsList[answerList[i][0] - 1],
                    "studentAnswer",
                    studentAnswer
                );
            }
        },
        // 快速导航定位题目位置
        quickNavigation(id) {
            $("#" + id)[0].scrollIntoView({ behavior: "smooth" });
        },
    },
    beforeDestroy() {
        this.$store.commit("setQuestionsList", "");
        this.$store.commit("setAddQuestions", "");
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.questionsList = this.$store.getters.getQuestionsList;
        this.clacQuestionType();
        this.getAnswerList();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        
    },
    //当data中定义的数据有变化时就会加载updated方法
    updated() {},
};
</script>

<style lang="scss" scoped>
//@import url(); 引入公共css类
.viewPreview_container {
    z-index: 0;
    position: relative;
    width: 100%;
    height: 100%;
    .title {
        font-size: 20px;
    }
    .box-card,
    .info {
        margin: 40px 15px;
        .clearfix {
            display: flex;
            flex-direction: column;
        }
        .optionList {
            span {
                padding: 15px 0;
                display: block;
                border-bottom: 1px solid lightgrey;
            }
            span.optionList_rightOption{
                border-bottom: 0px;
                display: inline-block;
            }
        }
    }
}

.myCircle {
    width: 40px !important;
    height: 40px !important;
    margin: 10px !important;
    &:hover {
        color: white;
    }
}
</style>
